<template>
  <div class="app-container">
    任务单处理流程
    <el-steps :active="5" simple finish-status="success">
      <el-step title="视觉检测" />
      <el-step title="告警触发" />
      <el-step title="任务单触发" />
      <el-step title="任务单确认" />
      <el-step title="任务单解决" />
    </el-steps>
    <div class="search-container">
      <!-- <el-input v-model="searchForm.deptName" class="search-input" placeholder="请输入部门名" :clearable="true" /> -->
      <SltFromDepTree v-model="searchForm.deptId" />
      <common-select
        v-model="searchForm.orderStatus"
        name="EnumWorkOrderStatus"
        placetext="请选择任务单状态"
        @input="getList({ pageNo: 1 })"
      />
      <common-select
        v-model="searchForm.businessScenario"
        name="EnumWorkAlarmType"
        placetext="请选择业务场景"
        @input="getList({ pageNo: 1 })"
      />
      <common-select
        v-model="searchForm.falseAlerm"
        name="EnumFalsePositive"
        placetext="请选择任务单误报类型"
        @input="getList({ pageNo: 1 })"
      />
      <el-input v-model="searchForm.managerUserName" class="search-input" placeholder="请输入负责人" :clearable="true" />
      <el-input v-model="searchForm.managerUserPhone" class="search-input" placeholder="请输入负责人电话" :clearable="true" />
      <el-input v-model="searchForm.acceptUserName" class="search-input" placeholder="请输入处置人" :clearable="true" />
      <el-date-picker
        v-model="pickerOptions.value2"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="触发开始时间"
        value-format="timestamp"
        end-placeholder="触发结束时间"
        align="right"
      />
      <el-date-picker
        v-model="pickerOptions.value1"
        type="datetimerange"
        :picker-options="pickerOptions"
        range-separator="至"
        start-placeholder="接单开始时间"
        value-format="timestamp"
        end-placeholder="接单结束时间"
        align="right"
      />
      <el-button type="primary" icon="el-icon-search" size="small" @click="getList({ pageNo: 1 })">搜索</el-button>
      <el-button type="primary" icon="el-icon-download" size="small" @click="getExcel()">导出</el-button>
    </div>
    <div>
      <span>任务单总数 {{ totalNumberOfWorkOrder }}</span>
      <el-divider direction="vertical" />
      <span>待处理任务单数 {{ toDoQuantity }}</span>
      <el-divider direction="vertical" />
      <span>已处理任务单数 {{ quantityDone }}</span>
    </div>
    <div class="function-buttons">
      <!-- <el-button type="primary" size="small" icon="el-icon-edit" @click="showAdd">新增</el-button> -->
    </div>
    <div>
      <el-table v-loading="listLoading" :data="list" border fit highlight-current-row style="width: 100%">
        <el-table-column align="center" label="#" width="40" type="index" />
        <el-table-column width="170" align="center" label="任务单触发时间">
          <template slot-scope="scope">
            <span>{{ scope.row.triggerTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>
        <el-table-column width="" align="center" label="触发部门">
          <template slot-scope="scope">
            <span>{{ scope.row.deptName }}</span>
          </template>
        </el-table-column>
        <el-table-column width="" align="center" label="业务场景">
          <template slot-scope="scope">
            <span>{{ scope.row.alarmLocation }}</span>
          </template>
        </el-table-column>
        <el-table-column width="220" align="center" label="任务单状态">
          <template slot-scope="scope">
            <span>{{ scope.row.orderStatus | filterEnumWorkOrderStatus }}</span>
          </template>
        </el-table-column>
        <el-table-column width="" align="center" label="负责人">
          <template slot-scope="scope">
            <span>{{ scope.row.managerUserName }}</span>
          </template>
        </el-table-column>
        <el-table-column width="140" align="center" label="联系方式">
          <template slot-scope="scope">
            <span>{{ scope.row.managerUserPhone }}</span>
          </template>
        </el-table-column>
        <el-table-column width="170" align="center" label="接单时间">
          <template slot-scope="scope">
            <span v-if="scope.row.acceptTime != null">{{ scope.row.acceptTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')
            }}</span>
          </template>
        </el-table-column>
        <!--        <el-table-column width="170" align="center" label="最近预处置时间">-->
        <!--          <template slot-scope="scope">-->
        <!--            <span v-if="scope.row.preprocessingTime != null">{{ scope.row.preprocessingTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column width="170" align="center" label="处置时间">
          <template slot-scope="scope">
            <span v-if="scope.row.disposalTime != null">{{ scope.row.disposalTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')
            }}</span>
          </template>
        </el-table-column>
        <el-table-column width="" align="center" label="处置人">
          <template slot-scope="scope">
            <span>{{ scope.row.acceptUserName }}</span>
          </template>
        </el-table-column>
        <el-table-column width="" align="center" label="是否误报">
          <template slot-scope="scope">
            <span v-if="scope.row.falseAlerm != null">{{ scope.row.falseAlerm === 1 ? '是' : '否' }}</span>
          </template>
        </el-table-column>
        <el-table-column width="200" align="center" label="操作">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.orderStatus == 3"
              v-hasPermission="['work_order_review']"
              type="text"
              @click="review(scope.row)"
            >待审批</el-button>
            <el-button
              v-if="(scope.row.orderStatus == 1 || scope.row.orderStatus == 2)"
              v-hasPermission="['work_order_remind']"
              type="text"
              @click="reminders(scope.row)"
            >催办</el-button>
            <el-button
              v-if="(scope.row.orderStatus == 1 || scope.row.orderStatus == 2)"
              v-hasPermission="['work_order_process']"
              type="text"
              @click="process(scope.row)"
            >待处理</el-button>
            <el-button
              v-if="scope.row.orderStatus == 0"
              v-hasPermission="['work_order_accept']"
              type="text"
              @click="accept(scope.row)"
            >待接单</el-button>
            <el-button type="text" @click="showDetail(scope.row)">任务单详情</el-button>
            <el-popconfirm title="确认删除？" @onConfirm="remove(scope.row)">
              <el-button slot="reference" v-hasPermission="['work_order_remove']" type="text">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="listQuery.pageNo"
        :limit.sync="listQuery.pageSize"
        @pagination="pageChange"
      />
    </div>
    <!-- todo 调整表单字段 -->
    <el-dialog
      title="已接单提醒"
      :visible.sync="acceptOrderNoticeDisabled"
      :close-on-click-modal="false"
      style="width: 1600px;padding-left: 600px;"
    >
      <el-form label-width="180px">
        <el-form-item label="告警触发时间" prop="updateTime">
          <span>{{ acceptOrderNotice.time | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
        </el-form-item>
        <el-form-item label="告警部门" prop="content">
          <span>{{ acceptOrderNotice.deptName }}</span>
        </el-form-item>
        <el-form-item label="业务场景" prop="content">
          <span>{{ acceptOrderNotice.alarmLocation }}</span>
        </el-form-item>
        <el-form-item label="接单人" prop="operator">
          <span>{{ acceptOrderNotice.acceptUserName }}</span>
        </el-form-item>
        <el-form-item label="联系电话" prop="title">
          <span>{{ acceptOrderNotice.acceptUserPhone }}</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="acceptOrderNoticeDisabled = false">确认</el-button>
      </span>
    </el-dialog>
    <!-- todo 调整表单字段 -->
    <el-dialog title="详情" :visible.sync="formData.formDialog" :destroy-on-close="true" width="900px">
      <!--      <el-dialog-->
      <!--        width="30%"-->
      <!--        title="图片列表"-->
      <!--        :visible.sync="innerVisible"-->
      <!--        append-to-body-->
      <!--      >-->
      <!--        <div style="display: flex;flex-flow: row wrap;align-content: flex-start;">-->
      <!--          <div v-for="iteme in workOrderDetail.imageList" :key="iteme" style="padding-left: 3%;padding-top: 10px">-->
      <!--            <img :src="cfg.imageDomain + iteme" style="width: 200px;height: 200px;flex: 0 0 33%;" class="image" @click="openImage(cfg.imageDomain +iteme)">-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </el-dialog>-->
      <el-timeline v-if="formData.formDialog">
        <el-timeline-item>
          <el-card shadow="hover" :body-style="{ padding: '0px' }" style="width: 100%; height: 9%">
            <!--            <img :src="cfg.imageDomain + formData.props.imageUrl" style="width: 200px;height: 200px;" class="image" @click="openImage(cfg.imageDomain +formData.props.imageUrl)">-->
            <!--            <el-button type="text" class="button" @click="innerVisible = true">查看更多</el-button>-->
            <!--            {{workOrderDetail.imageList}}-->
            <!-- <el-image
              v-if="workOrderDetail && workOrderDetail.imageList"
              style="width: 100%; height: 100%"
              :src="cfg.imageDomain + formData.props.imageUrl"
              :preview-src-list="workOrderDetail.imageList.map(item => cfg.imageDomain + item)"
            /> -->
            <ImgWithBorder :img-list="workOrderDetail.imageLocations" />
          </el-card>
        </el-timeline-item>
        <el-timeline-item
          :timestamp="formData.props.triggerTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')"
          placement="top"
        >
          <el-card shadow="hover">
            <h3>业务场景：{{ formData.props.alarmLocation }}</h3>
            <h4>告警场站/营业厅：{{ formData.props.deptName }}</h4>
            <h4>所属机构：{{ formData.props.affiliation }}</h4>
            <p>负责人：{{ formData.props.managerUserName }}</p>
            <p>联系方式：{{ formData.props.managerUserPhone }}</p>
            <p>告警触发时间：{{ formData.props.triggerTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item
          v-if="formData.props.orderStatus != 0"
          placement="top"
          :timestamp="formData.props.acceptTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')"
        >
          <el-card shadow="hover">
            <p>接单人：{{ formData.props.acceptUserName }}</p>
            <p>接单时间：{{ formData.props.acceptTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item
          v-for="item in workOrderDetail.processList"
          :key="item.id"
          placement="top"
          :timestamp="item.createTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')"
        >
          <el-card shadow="hover">
            <p v-if="item.type == 0">预处置时间：{{ item.createTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</p>
            <p v-if="item.type == 1">处置时间：{{ item.createTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</p>
            <p>处置人：{{ item.operator }}</p>
            <p>联系方式：{{ item.userPhone }}</p>
            <div v-if="item.previewImgPathList" style="display: flex;flex-wrap: wrap;">
              <div v-for="(itm) in item.previewImgPathList" :key="itm.id" style="margin-left: 5px;margin-top: 5px">
                <el-image
                  style="width: 90px;height: 90px;float: left"
                  :src="cfg.imageDomain + itm"
                  :fit="'fit'"
                  :preview-src-list="[cfg.imageDomain + itm]"
                />
              </div>
            </div>
            <video
              v-if="!!item.videoUrl"
              style="margin-top: 20px"
              class="video-preview"
              controls
              :src="cfg.imageDomain + item.videoUrl"
              alt=""
            />
            <p>处置描述：{{ item.processingDescription }}</p>
          </el-card>
        </el-timeline-item>
        <el-timeline-item
          v-for="item in workOrderDetail.reviewList"
          :key="item.id"
          placement="top"
          :timestamp="item.createTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')"
        >
          <el-card shadow="hover">
            <p>审批时间：{{ item.createTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</p>
            <p>审批人：{{ item.operator }}</p>
            <p>联系方式：{{ item.userPhone }}</p>
            <p>审批结果：{{ item.reviewStatus | filterEnumWorkOrderReviewStatus }}</p>
            <p>审批意见：{{ item.remark }}</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
      <el-form v-if="visibleReview" ref="saveForm" :model="formData.props" :rules="formData.rules" label-width="78px">
        <el-form-item label="审批结果" prop="reviewStatus">
          <el-select v-model="formData.props.reviewStatus" placeholder="请选择审批结果">
            <el-option label="通过" value="0" />
            <el-option label="驳回" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="审批意见" prop="remark">
          <el-input v-model="formData.props.remark" placeholder="请输入审批意见" type="textarea" :clearable="true" autosize />
        </el-form-item>
      </el-form>
      <el-form
        v-if="visibleProcess"
        ref="processForm"
        :model="formData.props"
        :rules="formData.processRules"
        label-width="78px"
      >
        <el-form-item label="是否误报" prop="falseAlerm">
          <el-radio-group v-model="formData.props.falseAlerm" size="medium">
            <el-radio
              v-for="(item, index) in falseAlermOptions"
              :key="index"
              :label="item.value"
              :disabled="item.disabled"
            >{{ item.label }}</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="处置描述" prop="processingDescription">
          <el-input
            v-model="formData.props.processingDescription"
            placeholder="请输入处置描述"
            type="textarea"
            :clearable="true"
            autosize
            @input="change"
          />
        </el-form-item>
        <el-form-item label="选择图片">
          <UploadFile v-model="formData.props.previewImgPathList" :limit="5" />
          <!-- <div style="display: flex;flex-direction: row;">
            <div
              class="avatar-uploader"
              style="float: left;"
            >
              <span class="el-upload" @click="previewChooseImg(1)">
                <i class="el-icon-plus avatar-uploader-icon" />
              </span>
            </div>
            <div v-if="formData.props.previewImgPathList" style="display: flex;flex-wrap: wrap;">
              <div
                v-for="(item,index) in formData.props.previewImgPathList"
                :key="item.id"
                style="margin-left: 5px;margin-top: 5px"
              >
                <el-link
                  :underline="false"
                  style="float: left;margin-top: -16px;"
                  @click="deleteImg(index)"
                >
                  <i style="color: red;height: 20px" class="el-icon-remove-outline" />
                </el-link>
                <el-image
                  style="width: 90px;height: 90px;float: left"
                  :src="cfg.imageDomain + item"
                  :fit="'fit'"
                  :preview-src-list="[cfg.imageDomain + item]"
                />
              </div>
            </div>
          </div> -->
        </el-form-item>
        <el-form-item label="选择视频" prop="videoUrl">
          <UploadFile v-model="formData.props.videoUrl" type="video" />
          <!-- <el-button type="text" @click="chooseVideoDialog = true">选择视频</el-button>
          <el-button v-if="!!formData.props.videoUrl" type="text" @click="formData.props.videoUrl = null">移除视频</el-button>
          <video v-if="!!formData.props.videoUrl" class="video-preview" controls :src="cfg.imageDomain + formData.props.videoUrl" alt="" /> -->
        </el-form-item>
      </el-form>
      <span v-if="visibleDetail" slot="footer" class="dialog-footer">
        <el-button @click="formData.formDialog = false;">关闭</el-button>
      </span>
      <span v-if="visibleProcess" slot="footer" class="dialog-footer">
        <el-button @click="formData.formDialog = false;">关闭</el-button>
        <!--        <el-popconfirm-->
        <!--          title="确认提交预处理？"-->
        <!--          @onConfirm="processSave(0)"-->
        <!--        >-->
        <!--          <el-button slot="reference" type="primary" :disabled="btnSubmitDisabled">预处理</el-button>-->
        <!--        </el-popconfirm>-->
        <el-popconfirm :key="btnSubmitDisabled?1:0" title="确认提交审核？" @onConfirm="processSave(1)">
          <el-button slot="reference" type="primary" :disabled="btnSubmitDisabled">提交审核</el-button>
        </el-popconfirm>
      </span>
      <span v-if="visibleReview" slot="footer" class="dialog-footer">
        <el-button @click="formData.formDialog = false;">关闭</el-button>
        <el-popconfirm :key="btnSubmitDisabled?1:0" title="确认提交审批？" @onConfirm="reviewSave">
          <el-button slot="reference" type="primary" :disabled="btnSubmitDisabled">确 定</el-button>
        </el-popconfirm>
      </span>
      <span v-if="visibleAccept" slot="footer" class="dialog-footer">
        <el-button
          @click="visibleAccept = false; visiblewubao = true; visibleProcess = true; formData.props.processingDescription = '误报'; formData.props.falseAlerm = 1"
        >误报</el-button>
        <el-popconfirm title="确认接单？" @onConfirm="acceptOrder(formData.props.orderId)">
          <el-button slot="reference" type="primary" :disabled="btnSubmitDisabled">确 定</el-button>
        </el-popconfirm>
      </span>
    </el-dialog>
    <choose-img
      :visible.sync="img.chooseImageDialog"
      :auto-crop-width="img.autoCropWidth"
      :auto-crop-height="img.autoCropHeight"
      :fixed="true"
      @choose="ChooseImg"
      @close="img.chooseImageDialog = false"
    />
    <choose-video :visible.sync="chooseVideoDialog" @choose="chooseVideo" @close="chooseVideoDialog = false" />
    <bulletFrame
      v-for="(item, index) in cacheBulletFrame"
      :key="index"
      :is-show="item.isShow"
      :title="item.title"
      :color="item.color"
      :is-animation="item.isAnimation"
      :data="item.data"
      @clickFalseAlarm="falseAlarm"
      @clickApproval="kapproval"
      @clickManagement="management"
      @clickConfirm="confirm"
      @clickMask="clickMask"
      @changePosition="changePosition"
    />
  </div>
</template>

<script>
import ImgWithBorder from './components/ImgWithBorder/ImgWithBorder.vue'
import UploadFile from '@/components/UploadFile/UploadFile.vue'
import SltFromDepTree from '@/components/SltFromDepTree/SltFromDepTree.vue'
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import request from '@/utils/request'
import CommonSelect from '@/components/wejoy/CommonSelect'
import ChooseImg from '@/components/wejoy/ChooseImg'
import bulletFrame from '@/components/bulletFrame/index'
import { parseTime } from '@/utils'
import ChooseVideo from '@/components/wejoy/ChooseVideo'

const audioUrlRed = require('../../../assets/bulletFrame_img/jingche.mp3')
const audioUrlBlue = require('../../../assets/bulletFrame_img/jingche.mp3')

export default {
  name: 'WorkOrderInfoList',
  components: { ImgWithBorder, ChooseVideo, ChooseImg, Pagination, CommonSelect, bulletFrame, SltFromDepTree, UploadFile },
  data() {
    return {
      chooseVideoDialog: false,
      deptTreeList: [],
      noticeDeptUserList: [],
      totalNumberOfWorkOrder: 0,
      quantityDone: 0,
      toDoQuantity: 0,
      innerVisible: false,
      btnSubmitDisabled: false,
      list: [],
      visibleProcess: false,
      visibleReview: false,
      visibleDetail: false,
      visibleAccept: false,
      visiblewubao: false,
      total: 0,
      acceptOrderNoticeDisabled: false,
      acceptOrderNotice: {
        time: '',
        deptName: '',
        businessScenario: '',
        acceptUserName: '',
        acceptUserPhone: ''
      },
      listLoading: true,
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      workOrderDetail: {
        imageLocations: [],
        workOrderInfo: {
        },
        imageList: [],
        processList: [],
        reviewList: []
      },
      falseAlermOptions: [{
        'label': '非误报',
        'value': 0
      }, {
        'label': '误报',
        'value': 1
      }],
      formData: {
        formDialog: false,
        formDetaillog: false,
        // 表单字段, 请自行删除不需要的
        props: {
          previewImgPathList: [],
          orderImageList: [],
          videoUrl: '',
          falseAlerm: 0,
          imageUrl: '',
          triggerTime: '',
          businessScenario: '',
          managerUserName: '',
          managerUserId: '',
          managerUserPhone: '',
          alarmLocation: '',
          deptName: '',
          deptId: '',
          acceptTime: '',
          acceptUserName: '',
          acceptUserId: '',
          orderStatus: '',
          preprocessingTime: '',
          disposalTime: '',
          operator: '',
          updateTime: '',
          status: '',
          processingDescription: '',
          affiliation: ''
        },
        // 表单校验规则, 默认增加了必填, 请自行限制长度或者其他修改
        rules: {
          remark: this.formRules({ required: true }),
          reviewStatus: this.formRules({ required: true })
        },
        processRules: {
          processingDescription: this.formRules({ required: true }),
          falseAlerm: this.formRules({ required: true })

        }
      },
      searchForm: {
        name: '',
        type: '',
        identity: '',
        createTimeStart: '',
        updateTimeEnd: '',
        deptId: ''
      },
      img: {
        type: 0,
        chooseImageDialog: false,
        autoCropWidth: 91,
        autoCropHeight: 91
      },

      // 缓存弹框需要的数据
      cacheBulletFrame: [],
      // 定时器变量
      timer: null,
      // 定时器变量
      timers: null,
      // type=4的弹框
      autoCloseList: [],
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      value2: [],
      value1: []
    }
  },
  watch: {
    'formData.formDialog': {
      handler: function(val, vale) {
        if (!val) {
          this.createTimer()
        }
      },
      deep: true
    },
    cacheBulletFrame() {
      if (!this.cacheBulletFrame.length) {
        return
      }
      this.cacheBulletFrame.forEach(item => {
        item.isAnimation = false
      })
      this.cacheBulletFrame[this.cacheBulletFrame.length - 1].isAnimation = true
    }
  },
  created() {
    this.registerFilter('EnumWorkAlarmType');
    this.registerFilter('EnumFalsePositive');
    this.registerFilter('EnumWorkOrderStatus');
    this.registerFilter('EnumWorkOrderReviewStatus');
    this.getList({
      pageNo: this.listQuery.pageNo
    });
    this.getStatistics();
    this.createTimer()
  },
  beforeDestroy() {
    clearInterval(this.timer)
    clearInterval(this.timers)
  },
  methods: {
    change() {
      this.$forceUpdate()
    },
    client() {
      if (window.innerWidth) {
        return {
          width: window.innerWidth,
          height: window.innerHeight
        }
      } else if (document.compatMode === 'CSS1Compat') {
        return {
          width: document.documentElement.clientWidth,
          height: document.documentElement.clientHeight
        }
      }
      return {
        width: document.body.clientWidth,
        height: document.body.clientHeight
      }
    },
    // 获取要关闭的弹框
    getCloseList() {
      if (!this.autoCloseList.length) {
        return
      }
      const param = []
      this.autoCloseList.forEach(item => {
        param.push(item.id)
      })
      console.log(param.toString())
      request({
        url: `/workorder/workOrderInfo/receivedOrder?ids=${param.toString()}`,
        method: 'POST',
        data: {}
      }).then(res => {
        const data = res.data
        for (let i = 0; i < data.length; i++) {
          for (let j = 0; j < this.autoCloseList.length; j++) {
            if (data[i] === this.autoCloseList[j].id) {
              this.closeBulletFrame(this.autoCloseList[j].uuid)
              this.autoCloseList.splice(j, 1)
            }
          }
        }
      })
    },
    /**
         * 计算弹框位置
         */
    calculationPosition() {
      const screenWidth = this.client().width
      /* const screenHeight = this.client().height */
      if (!this.cacheBulletFrame.length) {
        return [(screenWidth / 2) - (520 / 2), 50]
      }
      const lastLength = this.cacheBulletFrame.length - 1
      let left = this.cacheBulletFrame[lastLength].data.position[0] + 5
      let top = this.cacheBulletFrame[lastLength].data.position[1] + 5
      if (this.cacheBulletFrame[lastLength].isExceed) {
        left = Math.floor((Math.random() * (screenWidth - 520 - 50)) + 1)
        top = 0
      }
      return [left, top]
    },
    /**
         * 定时器开启
         */
    createTimer() {
      clearInterval(this.timer)
      this.timer = setInterval(() => {
        this.getUnreadWarningRemind();
      }, 15000)

      clearInterval(this.timers)
      this.timers = setInterval(() => {
        this.getCloseList();
      }, 5000)
    },
    /**
         * 关闭当前弹框
         */
    closeBulletFrame(id) {
      const index = this.cacheBulletFrame.findIndex(item => {
        return item.data.uuid === id
      })
      if (index === -1) return
      this.cacheBulletFrame.splice(index, 1)
    },
    /**
         * 子组件弹框超出屏幕触发
         */
    changePosition() {
      this.cacheBulletFrame[this.cacheBulletFrame.length - 1].isExceed = true
    },
    /**
         * 子组件审批
         */
    kapproval(e) {
      clearInterval(this.timer)
      clearInterval(this.timers)
      this.closeBulletFrame(e.uuid)
      this.warningRemind(e.type, e.id)
    },
    /**
         * 子组件去处置
         */
    management(e) {
      clearInterval(this.timer)
      clearInterval(this.timers)
      this.closeBulletFrame(e.uuid)
      this.warningRemind(e.type, e.id)
    },
    /**
         * 子组件误报
         */
    falseAlarm(e) {
      clearInterval(this.timer)
      clearInterval(this.timers)
      this.closeBulletFrame(e.uuid)
      this.visiblewubao = true
      console.log('111111' + e)
      this.warningRemind(e.type, e.id, true)
    },
    /**
         * 子组件确认
         */
    confirm(e) {
      if (e.type === 4) {
        this.$confirm('是否接单?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.acceptOrder(e.id)
          this.closeBulletFrame(e.uuid)
        })
        return
      }
      this.closeBulletFrame(e.uuid)
    },
    /**
         * 子组件蒙版
         */
    clickMask(e) {
      this.closeBulletFrame(e.uuid)
    },


    openImage(imageUrl) {
      if (imageUrl != null && imageUrl !== '') {
        window.open(imageUrl, '_blank');
      }
    },
    pageChange(page) {
      this.getList({
        pageNo: page.page,
        pageSize: page.limit
      })
    },
    time(date, type) {
      var y = date.getFullYear()
      var m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      var d = date.getDate()
      d = d < 10 ? '0' + d : d
      if (type === 1) {
        return y + '-' + m + '-' + d + 'T' + '23:59:59.999Z'
      }
      return y + '-' + m + '-' + d + 'T' + '00:00:00.000Z'
    },
    getList(params) {
      this.listLoading = true
      if (this.pickerOptions.value2 !== null && this.pickerOptions.value2 !== undefined) {
        this.searchForm.createTimeStart = this.pickerOptions.value2[0];
        this.searchForm.updateTimeEnd = this.pickerOptions.value2[1];
      } else {
        this.searchForm.createTimeStart = '';
        this.searchForm.updateTimeEnd = '';
      }
      if (this.pickerOptions.value1 !== null && this.pickerOptions.value1 !== undefined) {
        this.searchForm.acceptTimeStart = this.pickerOptions.value1[0];
        this.searchForm.acceptTimeEnd = this.pickerOptions.value1[1];
      } else {
        this.searchForm.acceptTimeStart = '';
        this.searchForm.acceptTimeEnd = '';
      }
      // if (this.pickerOptions.value2.size() !== 0) {
      // this.searchForm.createTimeStart = this.pickerOptions.value2[0];
      // this.searchForm.updateTimeEnd = this.pickerOptions.value2[1];
      // }
      request({
        url: '/workorder/workOrderInfo/getPageList',
        method: 'post',
        data: {
          pageNo: params.pageNo,
          pageSize: params.pageSize ? params.pageSize : this.listQuery.pageSize,
          ...this.searchForm
        }
      }).then(res => {
        const data = res.data;
        if (data != null) {
          this.list = data.rows;
          this.total = data.total;
          this.listQuery.pageNo = params.pageNo;
        }
        this.getStatistics();
        this.listLoading = false;
      }, () => {
        this.listLoading = false;
      })
    },
    getExcel() {
      if (this.pickerOptions.value2 !== null && this.pickerOptions.value2 !== undefined) {
        this.searchForm.createTimeStart = this.pickerOptions.value2[0];
        this.searchForm.updateTimeEnd = this.pickerOptions.value2[1];
      }
      if (this.pickerOptions.value1 !== null && this.pickerOptions.value1 !== undefined) {
        this.searchForm.acceptTimeStart = this.pickerOptions.value1[0];
        this.searchForm.acceptTimeEnd = this.pickerOptions.value1[1];
      }
      if (this.searchForm.createTimeStart === '') {
        this.$message.error('请选则开始日期');
        return
      }
      if (this.searchForm.updateTimeEnd === '') {
        this.$message.error('请选则结束日期');
        return
      }
      console.log(Date.parse(this.searchForm.updateTimeEnd))
      // eslint-disable-next-line no-unused-vars managerUserName  managerUserPhone  acceptUserName
      let url = `${process.env.VUE_APP_BASE_API}/workorder/workOrderInfo/excel?`;
      url += `updateTimeEnd=` + this.searchForm.updateTimeEnd + `&`;
      url += `createTimeStart=` + this.searchForm.createTimeStart + `&`;
      if (typeof this.searchForm.businessScenario !== 'undefined' && this.searchForm.businessScenario != null && this.searchForm.businessScenario !== '') {
        url += `businessScenario=${this.searchForm.businessScenario}&`;
      }
      if (typeof this.searchForm.orderStatus !== 'undefined' && this.searchForm.orderStatus != null && this.searchForm.orderStatus !== '') {
        url += `orderStatus=${this.searchForm.orderStatus}&`;
      }
      if (typeof this.searchForm.deptName !== 'undefined' && this.searchForm.deptName != null && this.searchForm.deptName !== '') {
        url += `deptName=${this.searchForm.deptName}&`;
      }
      if (typeof this.searchForm.deptId !== 'undefined' && this.searchForm.deptId != null && this.searchForm.deptId !== '') {
        url += `deptId=${this.searchForm.deptId}&`;
      }
      if (typeof this.searchForm.managerUserName !== 'undefined' && this.searchForm.managerUserName != null && this.searchForm.managerUserName !== '') {
        url += `managerUserName=` + this.searchForm.managerUserName + `&`;
      }
      if (typeof this.searchForm.managerUserPhone !== 'undefined' && this.searchForm.managerUserPhone != null && this.searchForm.managerUserPhone !== '') {
        url += `managerUserPhone=${this.searchForm.managerUserPhone}&`;
      }
      if (typeof this.searchForm.acceptUserName !== 'undefined' && this.searchForm.acceptUserName != null && this.searchForm.acceptUserName !== '') {
        url += `acceptUserName=${this.searchForm.acceptUserName}&`;
      }
      if (typeof this.searchForm.acceptTimeEnd !== 'undefined' && this.searchForm.acceptTimeEnd != null && this.searchForm.acceptTimeEnd !== '') {
        url += `acceptTimeEnd=${this.searchForm.acceptTimeEnd}&`;
      }
      if (typeof this.searchForm.acceptTimeStart !== 'undefined' && this.searchForm.acceptTimeStart != null && this.searchForm.acceptTimeStart !== '') {
        url += `acceptTimeStart=${this.searchForm.acceptTimeStart}&`;
      }
      window.open(url)
    },
    warningRemind(type, id, isParam = false) {
      this.getgetDetailById(id, isParam);
      console.log('type=' + type)
      if (type === 4) {
        this.accept();
      }
      if (type === 2) {
        this.review();
      }
      if (type === 3) {
        this.process();
      }
    },
    getUnreadWarningRemind() {
      request({
        url: '/system/sysNotice/getUnreadWarningRemind',
        method: 'get',
        data: {}
      }).then(res => {
        if (res.data != null) {
          const audios = new Audio()
          if (res.data.noticeType === 5) {
            this.acceptOrderNotice.acceptUserName = res.data.workOrderInfo.acceptUserName;
            this.acceptOrderNotice.acceptUserPhone = res.data.workOrderInfo.acceptUserPhone;
            this.acceptOrderNotice.businessScenario = res.data.workOrderInfo.businessScenario;
            this.acceptOrderNotice.deptName = res.data.workOrderInfo.deptName;
            this.acceptOrderNotice.time = res.data.workOrderInfo.triggerTime
            this.acceptOrderNoticeDisabled = true;
            const data = {
              isShow: true,
              // title: res.data.workOrderInfo.alarmLocation,
              title: '接单提醒',
              color: 'blue',
              data: {
                imageAttributeJson: res.data.workOrderInfo.imageAttributeJson,
                imageUrl: res.data.workOrderInfo.imageUrl,
                type: res.data.noticeType,
                id: res.data.workOrderInfo.id,
                uuid: new Date().getTime(),
                img: res.data.workOrderInfo.imageUrl,
                position: this.calculationPosition(),
                list: [
                  {
                    title: '接单时间：',
                    content: parseTime(res.data.workOrderInfo.acceptTime, '{y}-{m}-{d} {h}:{i}')
                  },
                  {
                    title: '告警场站营业厅：',
                    content: res.data.workOrderInfo.deptName
                  },
                  {
                    title: '业务场景：',
                    content: res.data.workOrderInfo.alarmLocation
                  },
                  {
                    title: '接单人：',
                    content: res.data.workOrderInfo.acceptUserName
                  },
                  {
                    title: '联系电话：',
                    content: res.data.workOrderInfo.acceptUserPhone
                  }
                ]
              }
            }
            setTimeout(() => {
              this.closeBulletFrame(data.data.uuid)
            }, Number(res.data.popupTime) * 1000)
            this.cacheBulletFrame.push(data)
            audios.src = audioUrlBlue
            audios.play()
          } else {
            // this.warningRemind(res.data.noticeType, res.data.workOrderInfo.id);
            let data = null
            if (res.data.noticeType === 4) {
              data = {
                isShow: true,
                title: res.data.workOrderInfo.alarmLocation,
                color: 'red',
                data: {
                  imageAttributeJson: res.data.workOrderInfo.imageAttributeJson,
                  imageUrl: res.data.workOrderInfo.imageUrl,
                  type: res.data.noticeType,
                  id: res.data.workOrderInfo.id,
                  uuid: new Date().getTime(),
                  img: res.data.workOrderInfo.imageUrl,
                  position: this.calculationPosition(),
                  list: [
                    {
                      title: '触发时间：',
                      content: parseTime(res.data.workOrderInfo.triggerTime, '{y}-{m}-{d} {h}:{i}')
                    },
                    {
                      title: '告警场站营业厅：',
                      content: res.data.workOrderInfo.deptName
                    },
                    {
                      title: '业务场景：',
                      content: res.data.workOrderInfo.alarmLocation
                    },
                    {
                      title: '负责人：',
                      content: res.data.workOrderInfo.managerUserName
                    },
                    {
                      title: '联系电话：',
                      content: res.data.workOrderInfo.managerUserPhone
                    }
                  ]
                }
              }
              this.autoCloseList.push({
                id: data.data.id,
                uuid: data.data.uuid
              })
            }
            if (res.data.noticeType === 2) {
              data = {
                isShow: true,
                title: res.data.workOrderInfo.alarmLocation,
                color: 'red',
                data: {
                  imageAttributeJson: res.data.workOrderInfo.imageAttributeJson,
                  imageUrl: res.data.workOrderInfo.imageUrl,
                  type: res.data.noticeType,
                  id: res.data.workOrderInfo.id,
                  uuid: new Date().getTime(),
                  img: res.data.workOrderInfo.imageUrl,
                  position: this.calculationPosition(),
                  list: [
                    {
                      title: '处置时间：',
                      content: parseTime(res.data.processList[res.data.processList.length - 1].createTime, '{y}-{m}-{d} {h}:{i}')
                    },
                    {
                      title: '告警场站营业厅：',
                      content: res.data.workOrderInfo.deptName
                    },
                    {
                      title: '业务场景：',
                      content: res.data.workOrderInfo.alarmLocation
                    },
                    {
                      title: '处置人：',
                      content: res.data.workOrderInfo.operator
                    },
                    {
                      title: '联系电话：',
                      content: res.data.workOrderInfo.acceptUserPhone
                    },
                    {
                      title: '处置描述：',
                      content: res.data.processList[res.data.processList.length - 1].processingDescription
                    }
                  ]
                }
              }
            }
            if (res.data.noticeType === 3) {
              data = {
                isShow: true,
                title: res.data.workOrderInfo.alarmLocation,
                color: 'red',
                data: {
                  imageAttributeJson: res.data.workOrderInfo.imageAttributeJson,
                  imageUrl: res.data.workOrderInfo.imageUrl,
                  type: res.data.noticeType,
                  id: res.data.workOrderInfo.id,
                  uuid: new Date().getTime(),
                  img: res.data.workOrderInfo.imageUrl,
                  position: this.calculationPosition(),
                  list: [
                    {
                      title: '审核时间：',
                      content: parseTime(res.data.reviewList[res.data.reviewList.length - 1].createTime, '{y}-{m}-{d} {h}:{i}')
                    },
                    {
                      title: '告警场站营业厅：',
                      content: res.data.workOrderInfo.deptName
                    },
                    {
                      title: '业务场景：',
                      content: res.data.workOrderInfo.alarmLocation
                    },
                    {
                      title: '处置人：',
                      content: res.data.workOrderInfo.operator
                    },
                    {
                      title: '联系电话：',
                      content: res.data.workOrderInfo.managerUserPhone
                    },
                    {
                      title: '处置描述：',
                      content: res.data.processList[res.data.processList.length - 1].processingDescription
                    },
                    {
                      title: '审批意见：',
                      content: res.data.reviewList[res.data.reviewList.length - 1].remark
                    }
                  ]
                }
              }
            }

            this.cacheBulletFrame.push(data)

            this.$router.push({ path: '/order/workOrderInfoList', query: { id: res.data.workOrderInfo.id, type: res.data.noticeType }})

            audios.src = audioUrlRed
            audios.play()
          }
        }
      })
    },
    processSave(type) {
      var _this = this;
      this.disableBtn(this, 'btnSubmitDisabled');
      console.log(_this.formData.props)
      this['$refs'].processForm.validate(function(valid) {
        if (!valid) {
          return;
        }
        _this.visiblewubao = false
        _this.formData.props.type = type
        _this.formData.props.orderId = _this.workOrderDetail.workOrderInfo.id
        if (_this.formData.props.previewImgPathList != null && _this.formData.props.previewImgPathList.length > 0) {
          _this.formData.props.imgPath = _this.formData.props.previewImgPathList.join(',')
        } else {
          _this.formData.props.imgPath = '';
        }
        request({
          url: '/workorder/workOrderProcess/save',
          method: 'post',
          data: _this.formData.props
        }).then(res => {
          _this.$message.success('保存成功');
          _this.getList({
            pageNo: 1,
            pageSize: _this.listQuery.pageSize
          });
          _this.formData.formDialog = false;
        })
      });
    },
    reviewSave() {
      var _this = this;
      this.disableBtn(this, 'btnSubmitDisabled');
      this['$refs'].saveForm.validate(function(valid) {
        if (!valid) {
          return;
        }
        _this.formData.props.orderId = _this.workOrderDetail.workOrderInfo.id
        request({
          url: '/workorder/workOrderReview/save',
          method: 'post',
          data: _this.formData.props
        }).then(res => {
          _this.$message.success('保存成功');
          _this.getList({
            pageNo: 1,
            pageSize: _this.listQuery.pageSize
          });
          _this.formData.formDialog = false;
        })
      });
    },
    remove(data) {
      var _this = this;
      request({
        method: 'post',
        url: `/workorder/workOrderInfo/remove?id=${data.id}`,
        data: {}
      }).then(res => {
        _this.$message.success('删除成功');
        _this.getList({
          pageNo: 1,
          pageSize: _this.listQuery.pageSize
        });
        data.status = 0;
      })
    },
    reminders(data) {
      var _this = this;
      request({
        method: 'post',
        url: `/workorder/workOrderInfo/reminders?id=${data.id}`,
        data: {}
      }).then(res => {
        _this.$message.success('催单成功！请耐心等待');
        _this.getList({
          pageNo: 1,
          pageSize: _this.listQuery.pageSize
        });
        data.status = 0;
      })
    },
    acceptOrder(id) {
      var _this = this;
      /* id = _this.workOrderDetail.workOrderInfo.id */
      request({
        method: 'post',
        url: `/workorder/workOrderInfo/acceptOrder?id=${id}`,
        data: {}
      }).then(res => {
        _this.$message.success('接单成功！');
        this.formData.formDialog = false;
        _this.getList({
          pageNo: 1,
          pageSize: _this.listQuery.pageSize
        });
      })
    },
    getStatistics() {
      var _this = this;
      request({
        method: 'post',
        url: `/workorder/workOrderInfo/getStatistics`,
        data: {
          ...this.searchForm
        }
      }).then(res => {
        _this.totalNumberOfWorkOrder = res.data.totalNumberOfWorkOrder;
        _this.quantityDone = res.data.quantityDone;
        _this.toDoQuantity = res.data.toDoQuantity
      })
    },
    getgetDetail(data) {
      var _this = this;
      request({
        method: 'get',
        url: `/workorder/workOrderInfo/getDetail?id=${data.id}`,
        data: {}
      }).then(res => {
        _this.workOrderDetail = res.data;
        _this.formData.props.orderImageList = res.data.imageList
      })
    },
    getgetDetailById(id, isParam = false) {
      var _this = this;
      request({
        method: 'get',
        url: `/workorder/workOrderInfo/getDetail?id=${id}`,
        data: {}
      }).then(res => {
        _this.formData.props = {
          imageUrl: res.data.workOrderInfo.imageUrl,
          businessScenario: res.data.workOrderInfo.businessScenario,
          triggerTime: res.data.workOrderInfo.triggerTime,
          managerUserName: res.data.workOrderInfo.managerUserName,
          acceptTime: res.data.workOrderInfo.acceptTime,
          managerUserPhone: res.data.workOrderInfo.managerUserPhone,
          alarmLocation: res.data.workOrderInfo.alarmLocation,
          deptName: res.data.workOrderInfo.deptName,
          affiliation: res.data.workOrderInfo.affiliation,
          acceptUserName: res.data.workOrderInfo.acceptUserName,
          preprocessingTime: res.data.workOrderInfo.preprocessingTime,
          disposalTime: res.data.workOrderInfo.disposalTime,
          operator: res.data.workOrderInfo.operator,
          orderStatus: res.data.workOrderInfo.orderStatus,
          status: res.data.workOrderInfo.status
        }
        _this.workOrderDetail = res.data;
        if (isParam) {
          _this.visibleProcess = true;
          _this.visibleAccept = false;
          _this.formData.props.falseAlerm = 1;
          _this.formData.props.processingDescription = '误报'
        }
      })
    },
    handleAreaChange(val) {
      const data = this.$refs['cascader'].getCheckedNodes()[0].data;
      this.formData.props.parentName = data.name;
      this.formData.props.parentId = data.id;
    },
    showDetail: function(data) {
      // todo 设置数据进入表单
      this.getgetDetail(data)
      this.formData.props = {
        imageUrl: data.imageUrl,
        businessScenario: data.businessScenario,
        triggerTime: data.triggerTime,
        managerUserName: data.managerUserName,
        acceptTime: data.acceptTime,
        managerUserPhone: data.managerUserPhone,
        alarmLocation: data.alarmLocation,
        deptName: data.deptName,
        affiliation: data.affiliation,
        acceptUserName: data.acceptUserName,
        preprocessingTime: data.preprocessingTime,
        disposalTime: data.disposalTime,
        operator: data.operator,
        orderStatus: data.orderStatus,
        status: data.status,
        previewImgPathList: [],
        orderImageList: []
      }
      this.visibleProcess = false;
      this.visibleReview = false;
      this.visibleAccept = false;
      this.visibleDetail = true;
      this.formData.formDialog = true
    },
    accept: function(data) {
      // todo 设置数据进入表单
      if (data) {
        this.formData.props = {
          orderId: data.id,
          imageUrl: data.imageUrl,
          businessScenario: data.businessScenario,
          triggerTime: data.triggerTime,
          managerUserName: data.managerUserName,
          acceptTime: data.acceptTime,
          managerUserPhone: data.managerUserPhone,
          alarmLocation: data.alarmLocation,
          deptName: data.deptName,
          affiliation: data.affiliation,
          acceptUserName: data.acceptUserName,
          preprocessingTime: data.preprocessingTime,
          disposalTime: data.disposalTime,
          operator: data.operator,
          orderStatus: data.orderStatus,
          status: data.status,
          previewImgPathList: [],
          orderImageList: []
        }
        this.getgetDetail(data)
      }
      console.log(this.formData.props.previewImgPathList != null) // true
      console.log(this.formData.props.previewImgPathList.length) // 0
      console.log(this.formData.props.previewImgPathList.length < 5)// true
      this.visibleProcess = false;
      this.visibleReview = false;
      this.visibleDetail = false;
      this.visibleAccept = true;
      this.formData.formDialog = true
    },
    process: function(data) {
      // todo 设置数据进入表单
      if (data != null) {
        this.formData.props = {
          orderId: data.id,
          imageUrl: data.imageUrl,
          businessScenario: data.businessScenario,
          triggerTime: data.triggerTime,
          managerUserName: data.managerUserName,
          acceptTime: data.acceptTime,
          managerUserPhone: data.managerUserPhone,
          alarmLocation: data.alarmLocation,
          deptName: data.deptName,
          affiliation: data.affiliation,
          acceptUserName: data.acceptUserName,
          preprocessingTime: data.preprocessingTime,
          disposalTime: data.disposalTime,
          operator: data.operator,
          orderStatus: data.orderStatus,
          status: data.status,
          falseAlerm: data.falseAlerm,
          // TODO
          // previewImgPathList: data.previewImgPathList
          previewImgPathList: [],
          videoUrl: data.videoUrl
        }
        this.getgetDetail(data)
      }
      this.visibleProcess = true;
      this.visibleReview = false;
      this.visibleDetail = false;
      this.visibleAccept = false;
      this.formData.formDialog = true;
    },
    review: function(data) {
      // todo 设置数据进入表单
      if (data) {
        this.formData.props = {
          orderId: data.id,
          imageUrl: data.imageUrl,
          businessScenario: data.businessScenario,
          triggerTime: data.triggerTime,
          managerUserName: data.managerUserName,
          acceptTime: data.acceptTime,
          affiliation: data.affiliation,
          managerUserPhone: data.managerUserPhone,
          alarmLocation: data.alarmLocation,
          deptName: data.deptName,
          acceptUserName: data.acceptUserName,
          preprocessingTime: data.preprocessingTime,
          disposalTime: data.disposalTime,
          operator: data.operator,
          orderStatus: data.orderStatus
        }
        this.getgetDetail(data)
      }
      this.visibleProcess = false;
      this.visibleReview = true;
      this.visibleDetail = false;
      this.visibleAccept = false;
      this.formData.formDialog = true;
    },
    save: function() {
      var _this = this;
      this.disableBtn(this, 'btnSubmitDisabled');
      this['$refs'].saveForm.validate(function(valid) {
        if (!valid) {
          return;
        }
        if (_this.formData.props.agencyId instanceof Array) {
          _this.formData.props.agencyId = _this.formData.props.agencyId[_this.formData.props.agencyId.length - 1]
        }
        request({
          url: '/workorder/workOrderInfo/save',
          method: 'post',

          data: _this.formData.props
        }).then(res => {
          _this.$message.success('保存成功');
          _this.getList({
            pageNo: 1,
            pageSize: _this.listQuery.pageSize
          });
          _this.formData.formDialog = false;
        })
      });
    },
    getDeptUserListAndUserList() {
      var _this = this;
      if (_this.formData.props.agencyId instanceof Array) {
        _this.formData.props.agencyId = _this.formData.props.agencyId[_this.formData.props.agencyId.length - 1]
      }
      request({
        method: 'get',
        url: `/system/sysDeptUserNotice/noticeDeptUserList?deptId=${_this.formData.props.agencyId}`
      }).then(res => {
        _this.noticeDeptUserList = res.data.noticeDeptUserList;
      })
    },
    getDeptUserListAndUserListToId(data) {
      var _this = this;
      request({
        method: 'get',
        url: `/system/sysDeptUserNotice/noticeDeptUserList?deptId=${data}`
      }).then(res => {
        _this.noticeDeptUserList = res.data.noticeDeptUserList;
      })
    },
    saveDetail: function() {
      var _this = this;
      this.disableBtn(this, 'btnSubmitDisabled');
      this['$refs'].saveDetailForm.validate(function(valid) {
        if (!valid) {
          return;
        }
        request({
          url: '/workorder/workOrderInfo/save',
          method: 'post',

          data: _this.formData.props
        }).then(res => {
          _this.$message.success('保存成功');
          _this.getList({
            pageNo: 1,
            pageSize: _this.listQuery.pageSize
          });
          _this.formData.formDetaillog = false;
        })
      });
    },
    previewChooseImg: function(type) {
      this.img.type = type;
      if (type === 0) {
        this.img.autoCropWidth = 91;
        this.img.autoCropHeight = 91;
      } else if (type === 1) {
        this.img.autoCropWidth = 211;
        this.img.autoCropHeight = 417;
      }
      if (type === 2) {
        this.img.autoCropWidth = 134;
        this.img.autoCropHeight = 134;
      }
      this.img.chooseImageDialog = true;
    },
    ChooseImg(file) {
      var url = file.path;
      if (this.img.type === 0) {
        this.formData.props.imgPath = url;
        return;
      }
      if (this.img.type === 2) {
        this.formData.props.codeImgPath = url;
        return;
      }
      if (this.formData.props.previewImgPathList == null || this.formData.props.previewImgPathList.indexOf(url) < 0) {
        if (this.formData.props.previewImgPathList == null) {
          this.formData.props.previewImgPathList = []
        }
        if (this.formData.props.previewImgPathList.length === 5) {
          this.$message.success('最多上传五张图片');
          return;
        }
        this.formData.props.previewImgPathList.push(url);
        return;
      }
    },
    chooseVideo(file) {
      this.formData.props.videoUrl = file.path;
    },
    deleteImg(index) {
      this.formData.props.previewImgPathList.splice(index, 1);
    }
  }
}
</script>

<style>
  .el-icon-circle-close::before {
    color: yellow;
  }
</style>

<style scoped>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    text-align: center;
    width: 160px;
    height: 170px;
    line-height: 160px;
  }

  .avatar {
    object-fit: cover;
    width: 160px;
    height: 160px;
  }

  .el-image-viewer__wrapper {
    z-index: 2003 !important;
  }

  .video-preview {
    display: block;
    height: 200px;
    min-width: 300px;
    max-width: 500px;
  }
</style>
